<template>
	<view>
		<cu-custom :key="'header'+headerKey" class="box1" bgColor="bg-gradual-blue" :isBack="true" backText="返回" title="人才生活补贴申领"></cu-custom>
		<view class="box2 bg-img " style="background-image: url(https://ewm.rsj.jinhua.gov.cn/jhrs/api/common/file/show/jycy/77c5f8bf0a27407db352a6285507b78f);overflow: hidden;">
			<view v-if="item.photo" style="margin-left: 30rpx;" class="cu-avatar round lg" :style="[{ backgroundImage: 'url(' + item.photo + ')' }]"></view>
			<view v-else class="cu-avatar  round margin-left" style="background-color: #F0F0F0; height: 60rpx;width: 60rpx;margin-top: 47.5rpx; margin-left: 50rpx;">
				<text style="color: #B1D0E9;font-size: 85rpx;" class="iconfont icon-jiatingchengyuanmorentouxiang"></text>
			</view>
			<view class="name margin-left">{{ fullName }}</view>
			<view class="old margin-left">{{ zhuanye }}</view>
			<view class="yuanxiao margin-left">
				<text class="number">{{ yuanxiao }}</text>
			</view>
			<view class="id margin-left">身份证号码</view>
			<view class="idcard margin-left ">{{ idcard }}</view>
		</view>
		<view class="box4">
			<view class="text2">确认相关信息</view>
			<view class="text3">
				市民卡卡号
				<view class="bank margin-left">{{ bankName }}</view>
			</view>
			<view class="text4" style="color: #007AFF;">上传合同照片</view>
			<view class="text5" style="color: #007AFF;">上传优秀毕业生照片（非必传）</view>
		</view>
		<view class="box5">
			<view class="instructions">
				<view class="insHead">温馨提示</view>
				<view class="insText">
					生活补助随时受理，按年发放。即申请人社保累计缴纳满12个月、24个月、36个月分别发放第一、二、三年生活补助。允许申请人提前结束生活补助（向所在地人社部门申请）,补助款项按申请人社保累计缴纳时长进行一次性发放，过后不再受理。
				</view>
			</view>
		</view>
		<view class="button" style="padding-top: 1180rpx;margin-left: 40rpx; width: z300rpx;">
			<button class="cu-btn shadow margin-tb-sm lg bg-blue-light" style="background-color: #1388ED; width: 675rpx;" @tap="save">提交</button>
		</view>
	</view>
</template>
<script>
export default {
	onShow() {
		this.headerKey += 1;
	},
	data() {
		return {
			headerKey:0,
			fullName: '宋紫薇',
			are: '24岁',
			zhuanye: '汽车营销与服务',
			yuanxiao: '绍兴职业技术学院',
			bankName: '',
			ybCardId: '',
			cardCode: '',
			idcard: '330721199906011441',
			aae013: ''
		};
	},
	methods: {
		up: function() {
			const data = {};
			data.aac003 = this.aac003;
			data.aac002 = this.aac002;
			console.log(data.aac003);
			console.log(data.aac002);
			this.$http
				.post(api.query, data)
				.then(res => {
					this.show = true;
					this.aac003 = res.result.aac003;
					this.aac002 = res.result.aac002;
					this.th0701 = res.result.th0701;
					this.th0702 = res.result.th0702;
					this.aab005 = res.result.aab005;
					this.th1201 = res.result.th1201;
					this.th1202 = res.result.th1202;
					this.aac049 = res.result.aac049;
					this.th1203 = res.result.th1203;
					this.th1205 = res.result.th1205;
					this.th1206 = res.result.th1206;
					this.th1207 = res.result.th1207;
					this.th1301 = res.result.th1301;
					this.th1302 = res.result.th1302;
					this.th1303 = res.result.th1303;
				})
				.catch(err => {});
		},
		save: function() {
			const data = {};
			const that = this;
			data.aac003 = this.aac003;
			data.aac002 = this.aac002;
			data.th0701 = this.th0701;
			data.th0702 = this.th0702;
			data.aab005 = this.aab005;
			data.th1301 = this.th1301;
			data.th1302 = this.th1302;
			data.aac049 = this.aac049;
			data.th1303 = this.th1303;
			data.th1205 = this.th1205;
			data.th1206 = this.th1206;
			data.th1207 = this.th1207;
			data.th1201 = this.th1201;
			data.th1202 = this.th1202;
			data.th1203 = this.th1203;
			data.th1204 = this.th1204;
			data.aae010 = this.aae010;
			data.aae008 = this.aae008;
			data.aae013 = this.aae013;
			data.th1208 = this.th1208;
			data.htpicture = this.htpicture;
			data.xjpicture = this.xjpicture;
			this.$http
				.post(api.save, data)
				.then(res => {
					uni.showModal({
						title: '提示',
						content: '提交成功',
						success: function(res) {}
					});
				})
				.catch(error => {});
		},
		ChooseImage(type) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					new Promise((resolve, reject) => {
						uni.uploadFile({
							url: reqConfig.jhrsUrl + commonApi.uploadFile, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								uploaderId: this.userId,
								uploader: this.fullName,
								fileClassCode: '20'
							},
							success: function(uploadFileRes) {
								const fileRes = JSON.parse(uploadFileRes.data);
								resolve(fileRes);
							},
							fail: function(error) {
								reject(error);
							}
						});
					})
						.then(data => {
							console.log(data);
							if (!data) {
								uni.showToast({
									icon: 'none',
									title: '上传文件失败',
									duration: 2000
								});
								return;
							}
							if (data && data.code !== 0) {
								uni.showToast({
									icon: 'none',
									title: data.message,
									duration: 2000
								});
								return;
							}
							const file = data.result.file;
							if (!file.flag) {
								uni.showToast({
									icon: 'none',
									title: '上传文件失败',
									duration: 2000
								});
								return;
							}
							const showId = file.showId;
							let url = reqConfig.jhrsUrl + commonApi.showFile + '/' + showId;
							console.log(type);
							if (type == 'photo') {
								this.photo = url;
								this.formData.photo = url;
								if (this.photoShowId) {
									if (showId != this.photoShowId) {
										this.DelImg(this.photoShowId);
									}
								}
								this.xjpicture = showId;
								this.formData.photoShowId = showId;
							} else {
								this.photoPath = url;
								this.formData.photoPath = url;
								if (this.avatarShowId) {
									if (showId != this.avatarShowId) {
										this.DelImg(this.avatarShowId);
									}
								}
								this.htpicture = showId;
							}
						})
						.catch(err => {
							uni.showToast({
								icon: 'none',
								title: '上传文件失败：' + err.message,
								duration: 2000
							});
						});
				}
			});
			console.log(this.htpicture);
		},
		DelImg(showId) {
			const data = {};
			data.uploaderId = this.userId;
			data.uploader = this.fullName;
			this.$jhrsHttp
				.post(commonApi.delFile + '/' + showId, data)
				.then(res => {})
				.catch(error => {});
		}
	}
};
</script>

<style>
.box1 {
	white-space: normal;
	width: 750upx;
	height: 400upx;
	padding: 0upx;
	margin-top: 0upx;
	margin-left: 0upx;
	float: left;
	position: absolute;
	top: 0upx;
	left: 0upx;
	background-image: linear-gradient(223deg, #19b8b9 0%, #0182fe 100%);
	border-radius: 0upx;
	border-bottom-left-radius: 100upx;
	border-bottom-right-radius: 100upx;
	font-size: 20rpx;
}
,
.box2 {
	white-space: normal;
	width: 670rpx;
	height: 318.5rpx;
	padding: 0rpx;
	margin-top: 140.5rpx;
	margin-left: 40rpx;
	float: left;
	position: absolute;
}
.name {
	font-family: PingFangSC-Light;
	font-size: 32rpx;
	color: #ffffff;
	text-align: left;
	height: 45rpx;
	width: 100rpx;
	margin-left: 130rpx;
	margin-top: -60rpx;
}
.old {
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #f8e71c;
	text-align: left;
	height: 33rpx;
	width: 101rpx;
	margin-left: 260rpx;
	margin-top: -36rpx;
}
.yuanxiao {
	background-image: linear-gradient(90deg, #1789fd 0%, #096dcc 99%);
	border-radius: 28px 0 0 28px;
	border-radius: 28px 0px 0px 28px;
	height: 56rpx;
	width: 241rpx;
	margin-left: 422rpx;
	margin-top: -36rpx;
}
.number {
	font-family: PingFangSCMedium;
	font-size: 30rpx;
	color: #ffffff;
	text-align: left;
}
.id {
	ont-family: STHeitiSC-Light;
	font-size: 26rpx;
	color: #ffffff;
	text-align: left;
	height: 26rpx;
	width: 130rpx;
	margin-left: 47rpx;
	margin-top: 30rpx;
}
.idcard {
	font-family: HelveticaNeue;
	font-size: 40rpx;
	color: #ffffff;
	text-align: left;
	height: 47rpx;
	width: 412rpx;
	margin-left: 47rpx;
	margin-top: 15rpx;
}
.box4 {
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	float: left;
	position: absolute;
	height: 336rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 475.5rpx;
}
.text2 {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #333333;
	text-align: left;
	height: 40rpx;
	width: 160rpx;
	margin-left: 30rpx;
	margin-top: 26rpx;
}
.text3 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 200rpx;
	margin-left: 30rpx;
	margin-top: 20rpx;
}
.text4 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 200rpx;
	margin-left: 30rpx;
	margin-top: 35rpx;
}
.text5 {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #808080;
	text-align: left;
	line-height: 80rpx;
	height: 40rpx;
	width: 400rpx;
	margin-left: 30rpx;
	margin-top: 35rpx;
}
.box5 {
	background: #ffffff;
	border-radius: 14px;
	border-radius: 14px;
	float: left;
	position: absolute;
	height: 340rpx;
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 825.5rpx;
}
.instructions {
	background-color: #ddebff;
	border-radius: 10rpx;
	width: 630rpx;
	height: 310rpx;
	margin-left: 22rpx;
	margin-top: 20rpx;
	padding-top: 22rpx;
	padding-left: 22rpx;
}
.insHead {
	font-family: PingFangSC-Semibold;
	font-size: 26rpx;
	color: #333333;
	letter-spacing: 0;
	height: 37rpx;
	line-height: 37rpx;
}
.insText {
	font-family: PingFangSC-Regular;
	font-size: 26rpx;
	color: #ff0000;
	letter-spacing: 0;
	line-height: 44rpx;
	margin-top: 8rpx;
	width: 560rpx;
	height: 132rpx;
}
.button {
	position: absolute;
	margin-top: 1rpx;
	width: 1320rpx;
}
</style>
